<template>
  <div class="header">
    <div class="left">
      <img src="@/assets/images/payOrder/glod.png" class="imgsize" alt />
      <span v-if="mineInfo?.usableMoney">{{$t('dqye')}}：{{mineInfo?.usableMoney}}</span>
      <span v-else>{{$t('dqye')}}：0</span>
    </div>
    <div class="right" @click="goRules()">
      <span>{{gameInfo.ruleTitle}}</span>
      <van-icon name="arrow" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ComHeader",
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapState("user", ["mineInfo"]),
    ...mapState("handlegame", ["gameName", "gameInfo"])
  },
  methods: {
    goRules() {
      var gameShow = false;
      var activeIndex = 3;
      this.$store.dispatch("handlegame/setIsGameShow", gameShow);
      this.$store.dispatch("handlegame/setIsGameShow", gameShow);
      this.$store.dispatch("handlegame/setActiveIndex", activeIndex);
    }
  }
};
</script>
<style lang="less" scoped>
.imgsize {
  width: 14px;
  height: 14px;
}
.header {
  display: flex;
  justify-content: space-between;
  .left {
    font-size: 12px;
    font-weight: 500;
    color: #e7bc4f;
  }
  .right {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #f3f3f3;
  }
}
</style>
